<template>
  <div ref="echartDom" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watchEffect, shallowRef, inject } from "vue";
import liaoning from "@/utils/liaoning.json";
import { pxToRem } from "@/utils/index";
const chartsData = reactive({
  list: [],
  min: 0,
  max: 0,
});
const myChart = shallowRef(null);
const echartDom = ref(null);
const echarts = inject("echarts");
// 获取地图数据
let mapData = liaoning;
// 注册自定义地图类型, 类型名称, 地图数据
echarts.registerMap("华盾", mapData);

// 接收参数
const props = defineProps({
  listData: {
    type: Object,
    default: () => {},
  }
});
const emits = defineEmits(["mapNameChange"]);
chartsData.list = props.listData;

const initEchart = () => {
  if (echartDom.value && chartsData.list) {
    myChart.value = echarts.init(echartDom.value);
    const grid = {
      left: "0%",
      right: "0",
      bottom: "0%",
      top: "0%",
      containLabel: true,
    };
    const visualMap = {
      orient: "vertical", // 设置为水平展示
      min: 0,
      max: 9000,
      bottom: 0,
      right: 0,
      text: ['高', '低'],
      itemWidth: pxToRem(18),
      itemHeight: pxToRem(150), // 调整高度值
      inRange: {
        color: ["#2073CA", "#5978C3", "#B95E75", "#E55151"],
      },
      textStyle: {
        color: "white",
      },
    };
    const geo = [
      {
        map: "华盾",
        type: "map",
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "50%"],
        layoutSize: "120%",
      },
      // 重影
      {
        type: "map",
        map: "华盾",
        zlevel: -1,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "51.3%"],
        layoutSize: "120%",
        itemStyle: {
          normal: {
            borderWidth: 2,
            borderColor: "RGBA(86, 139, 239, 1)",
            areaColor: "green",
          }
        },
      }
    ]
    const series = [
      {
        name: "华盾数据",
        type: "map",
        map: "华盾", // 自定义扩展图表类型
        selectedMode: 'single', // 只允许单选
        aspectScale: 1,
        zoom: 1, // 缩放
        select: {
          label: {
            color: 'white',
          },
          itemStyle: {
            color: 'rgb(55, 229, 245)'
          }
        },
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontWeight: "bold",
              fontSize: pxToRem(12),
              fontStyle: "italic",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgb(55, 229, 245)",
            borderWidth: 0.5,
            areaColor: "rgb(32,115,201)",
          },
          emphasis: {
            areaColor: "rgba(51, 227, 244, 0.8)",
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "120%",
        data: chartsData.list
      },
      {
        type: "scatter", // 增加自定义假点位
        coordinateSystem: "geo",
        data: [
          { value: [123.37,42.13], symbolSize: 15, itemStyle: { color: '#ff0000' } },
          { value: [123.37,42.03], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [122.8,42.03], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [120.8,42.03], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [120.5,40.9], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [121.2,41.5], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [122.2,42.6], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [122,41.2], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [122.5,40.2], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [123.2,41.2], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [123.3,40.6], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [124.3,40.6], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [124.5,40.9], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [124.1,41.2], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [125.1,41.7], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [124.1,42.7], symbolSize: 8, itemStyle: { color: '#ff0000' } },
          { value: [123.00,42.68], symbolSize: 10, itemStyle: { color: '#ff0000' } },
          { value: [120.70,41.54], symbolSize: 10, itemStyle: { color: '#ff0000' } },
          { value: [122.12,39.72], symbolSize: 10, itemStyle: { color: '#ff0000' } },
        ]
      }
    ];
    const option = {
      grid,
      visualMap,
      geo,
      series,
    };
    chartsData.min = Math.min(...chartsData.list.map((obj) => obj.value));
    chartsData.max = Math.max(...chartsData.list.map((obj) => obj.value));
    option.series[0].data = chartsData.list; // 更新series中的数据
    // 更新visualMap的最小值和最大值
    option.visualMap.min = chartsData.min;
    option.visualMap.max = chartsData.max;
    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (chartsData.list.length > 0) {
    chartsData.mapInd = props.mapInd;
    if (myChart.value && !myChart.value.isDisposed()) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    initEchart();
  }
};

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
